<!-- 投诉建议详情 -->
<template>
	<view class="main" v-if="show">
		<view class="mask"></view>
		<view class="detail-container">

			<div class="box-title">
				<div class="triangle"></div>
				<div>{{ suggType == 1 ? '投诉详情' : '查处详情' }}</div>
				<div class="close-item hoverClass" @click.stop="hideFn">
					<img class="close" src="../static/icon-close.png" mode="">
				</div>
			</div>

			<view class="plan" v-if="data.status == 0">
				<view class="item color-o">
					<view class="item-state">1</view>
					<view>待指派</view>
					<view class="wall"></view>
				</view>
				<view class="item">
					<view class="item-state">2</view>
					<view>跟进中</view>
					<view class="wall"></view>
				</view>
				<view class="item">
					<view class="item-state">3</view>
					<view>已完成</view>
				</view>
			</view>
			<view class="plan" v-if="data.status == 1">
				<view class="item color-b">
					<view class="item-state iconfont icon-xuanzhong"></view>
					<view>待指派</view>
					<view class="wall wall-b"></view>
				</view>
				<view class="item color-b">
					<view class="item-state">2</view>
					<view>跟进中</view>
					<view class="wall"></view>
				</view>
				<view class="item">
					<view class="item-state">3</view>
					<view>已完成</view>
				</view>
			</view>
			<view class="plan" v-if="data.status == 2">
				<view class="item color-b">
					<view class="item-state iconfont icon-xuanzhong"></view>
					<view>待指派</view>
					<view class="wall wall-b"></view>
				</view>
				<view class="item color-b">
					<view class="item-state iconfont icon-xuanzhong"></view>
					<view>跟进中</view>
					<view class="wall wall-r"></view>
				</view>
				<view class="item color-r">
					<view class="item-state iconfont icon-guanbi"></view>
					<view>已逾期</view>
				</view>
			</view>
			<view class="plan" v-if="data.status == 3">
				<view class="item color-b">
					<view class="item-state iconfont icon-xuanzhong"></view>
					<view>待指派</view>
					<view class="wall wall-b"></view>
				</view>
				<view class="item color-b">
					<view class="item-state iconfont icon-xuanzhong"></view>
					<view>跟进中</view>
					<view class="wall wall-b"></view>
				</view>
				<view class="item color-b">
					<view class="item-state iconfont icon-xuanzhong"></view>
					<view>已完成</view>
				</view>
			</view>

			<scroll-view scroll-y class="scroll-box">
				<view class="detail-box">
					<block v-if="suggType == 1">
						<block v-if="userType == 1">
							<view class="detail-item size-m">
								<view class="name">村委名称</view>
								<view class="value">{{ data.villageName }}</view>
							</view>
							<view class="detail-item size-s">
								<view class="name">分类名称</view>
								<view class="tag">{{ data.subTypeStr }}</view>
							</view>
							<view class="detail-item size-l">
								<view class="name">车牌号码</view>
								<view class="value">{{ data.carLicenseNum ? data.carLicenseNum : '-' }}</view>
							</view>
						</block>
						<block v-else>
							<view class="detail-item size-m">
								<view class="name">分类名称</view>
								<view class="tag">{{ data.subTypeStr }}</view>
							</view>
							<view class="detail-item size-s">
								<view class="name">车牌号码</view>
								<view class="value">{{ data.carLicenseNum ? data.carLicenseNum : '-' }}</view>
							</view>
						</block>
					</block>
					<block v-if="suggType == 2">
						<block v-if="userType == 1">
							<view class="detail-item size-m">
								<view class="name">标题</view>
								<view class="value">{{ data.title }}</view>
							</view>
							<view class="detail-item size-s">
								<view class="name">村委名称</view>
								<view class="value">{{ data.villageName }}</view>
							</view>
							<view class="detail-item size-m">
								<view class="name">分类名称</view>
								<view class="tag">{{ data.subTypeStr }}</view>
							</view>
							<view class="detail-item size-s">
								<view class="name">跟进方式</view>
								<view class="value">{{ data.isNeedAssignStr }}</view>
							</view>
							<view class="detail-item size-l">
								<view class="name">车牌号码</view>
								<view class="value">{{ data.carLicenseNum ? data.carLicenseNum : '-' }}</view>
							</view>
						</block>
						<block v-else>
							<view class="detail-item size-m">
								<view class="name">标题</view>
								<view class="value">{{ data.title }}</view>
							</view>
							<view class="detail-item size-s">
								<view class="name">分类名称</view>
								<view class="tag">{{ data.subTypeStr }}</view>
							</view>
							<view class="detail-item size-m">
								<view class="name">跟进方式</view>
								<view class="value">{{ data.isNeedAssignStr }}</view>
							</view>
							<view class="detail-item size-s">
								<view class="name">车牌号码</view>
								<view class="value">{{ data.carLicenseNum ? data.carLicenseNum : '-' }}</view>
							</view>
						</block>
					</block>


					<view class="detail-item size-l">
						<view class="name">内容描述</view>
						<view class="value">{{ data.content }}</view>
					</view>

					<view class="detail-item size-l">
						<view class="name">现场图片</view>
						<view class="image-list">
							<image v-for="item of data.pic" :key="item" :src="item" @click="checkImg(item)"
								mode="aspectFill"></image>
						</view>
					</view>
					<block v-if="suggType == 1">
						<view class="detail-item size-m">
							<view class="name">联系人</view>
							<view class="value">{{ data.userName }}</view>
						</view>
						<view class="detail-item size-s">
							<view class="name">联系电话</view>
							<view class="value">{{ data.phone ? data.phone : '-' }}</view>
						</view>
					</block>
					<block v-if="suggType == 2">
						<view class="detail-item size-m">
							<view class="name">登记人</view>
							<view class="value">{{ data.userName }}</view>
						</view>
						<view class="detail-item size-s">
							<view class="name">登记时间</view>
							<view class="value">{{ data.submitDateStr }}</view>
						</view>
					</block>
					<block v-if="data.status != 0">
						<view class="detail-item size-m">
							<view class="name">指派人</view>
							<view class="value">{{ data.assignedName }}</view>
						</view>
						<view class="detail-item size-s">
							<view class="name">指派时间</view>
							<view class="value">{{ data.assignedTime }}</view>
						</view>
						<block v-if="suggType != 1">
							<view class="detail-item size-m">
								<view class="name">处理人</view>
								<view class="value">{{ data.handlerName }} {{ data.handlerPhone }}</view>
							</view>
							<view class="detail-item size-s">
								<view class="name">预计完成时间</view>
								<view class="value">{{ data.planCompleteTimeStr }}</view>
							</view>
						</block>
						<block v-else>
							<view class="detail-item size-l">
								<view class="name">处理人</view>
								<view class="value">{{ data.handlerName }} {{ data.handlerPhone }}</view>
							</view>
						</block>
						<view class="detail-item size-l" v-if="followList.length">
							<view class="name">跟进记录</view>
							<view class="follow-list">
								<view class="follow-item" v-for="item of followList" :key="item.csfId">
									<view class="follow-data">
										<view class="name">{{ item.handlerName }}</view>
										<view class="type">{{ item.statusName }}</view>
										<view class="time">{{ item.followTime }}</view>
									</view>
									<view class="content">{{ item.content }}</view>
									<view class="img-list">
										<image v-for="(picItem,index) of item.pic" :key="picItem.url" :src="picItem.url"
											@click="checkImg2(picItem.url,index)" mode="aspectFill"></image>
										<!-- <image v-for="(picItem,index) of item.pic" @click="checkImg2(picItem.url,index)" :key="picItem.url" :src="picItem.url"
											mode="aspectFill"></image> -->
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>

			<view class="close-btn" @click="hideFn">关闭</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TSJYDetail",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			suggType: {
				type: Number,
				default: 1, // 投诉建议 = 1,查处 = 2,
			},
			id: {
				type: Number,
				default: 0,
			},
			isOperation: {
				type: Number,
				default: 0
			},
			userType: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				url: getApp().globalData.url,
				data: {},
				followList: []
			};
		},
		watch: {
			id: {
				handler(newValue, oldValue) {
					this.getData()
				},
				deep: true
			},
		},
		methods: {
			getData() {
				uni.request({
					url: this.url + 'api/largescreen/SuggestMXDetail',
					method: 'POST',
					data: {
						csId: this.id,
						isOperation: this.isOperation,
					},
					success: e => {
						if (e.data.code == 200) {
							// console.log(e.data.data.info)
							this.data = e.data.data.info
							const picTemp = []
							this.data.pic.forEach(item => {
								picTemp.push(item.url)
							})
							this.data.pic = picTemp
							this.followList = e.data.data.infogj
						}
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			checkImg(url) {
				uni.previewImage({
					urls: this.data.pic,
					current: url
				})
			},
			checkImg2(url, index) {
				const urls = []
				this.followList[index].pic.forEach(item => {
					urls.push(item.url)
				})
				uni.previewImage({
					urls: urls,
					current: url,
					indicator: 'number'
				})
			},
			hideFn() {
				this.$emit('hide')
			}
		}

	}
</script>

<style lang="scss">
	@import url(@/static/css/TSJYDetail.scss);
</style>